<template>
  <div class="demo-split">
    <Split v-model="split3" :max="0.836" :min="0">
      <div slot="right" class="demo-split-pane no-padding">
        <Card dis-hover :padding="8" :bordered="false">
          <Row class="card-top-btn">
            <i-col span="2" style="padding:8px 0;">
              <Button type="primary">
                <Icon type="ios-download" />导出Excel
              </Button>
            </i-col>
            <i-col span="20" style="overflow-X:scroll" class="no-scroll" id="centerScroll">
              <div style="width:100%;white-space:nowrap; padding:8px;">
                <Button type="text" @click="comName='ZNCStatistics'">智能车统计</Button>
                <Button type="text" @click="comName='DDCuse'">电动车使用记录</Button>
                <Button type="text">里程统计</Button>
                <Button type="text">行驶记录</Button>
                <Button type="text">反转查询</Button>
                <Button type="text">超速统计</Button>
                <Button type="text">疲劳驾驶</Button>
                <Button type="text">在线率统计</Button>
                <Button type="text">实时总里程查询</Button>
                <Button type="text">警情统计</Button>
                <Button type="text">里程统计</Button>
                <Button type="text">进出关键点围栏统计</Button>
                <Button type="text">五天连续不在线统计</Button>
                <Button type="text">七天位置无变化</Button>
                <Button type="text">拆除报警</Button>
                <Button type="text">断电报警</Button>
                <Button type="text">违章查询</Button>
                <Button type="text">车架号查询</Button>
                <Button type="text">停车时间统计</Button>
              </div>
            </i-col>
            <i-col span="2" style="padding:8px 0; text-align:right;">
              <ButtonGroup>
                <Button
                  type="primary"
                  :disabled="buttonDis"
                  icon="ios-arrow-back"
                  @click="scrollToHead"
                ></Button>

                <Button
                  type="primary"
                  :disabled="!buttonDis"
                  icon="ios-arrow-forward"
                  @click="scrollToEnd"
                  style="margin-left:10px;"
                ></Button>
              </ButtonGroup>
            </i-col>
          </Row>
          <keep-alive>
            <component :is="comName"></component>
          </keep-alive>
        </Card>
      </div>
      <div slot="left" class="demo-split-pane left-option">
        <span class="collapse-btn">
          <Button @click="toggle" type="primary" class="collapse-btn-b">
            <Icon type="ios-arrow-dropleft-circle" />
          </Button>
        </span>
        <div v-if="leftShow" class="left-option-warp">
          <UCollapse v-model="value2" simple style="margin-top:16px;">
            <UPanel name="1">
                <span class="collapse-dot"></span>
              所有车辆
              <div slot="content">
                <CarTreeList />
              </div>
            </UPanel>
          </UCollapse>
          <UCollapse v-model="value3" simple style="margin-top:16px;">
            <UPanel name="1">
                <span class="collapse-dot"></span>
              时间段
              <div slot="content">
                <TimeRange></TimeRange>
              </div>
            </UPanel>
          </UCollapse>
        </div>
      </div>
    </Split>
  </div>
</template>

<script>
import ZNCStatistics from "@/components/statistics/ZNCStatistics.vue";
import SearchCar from "@/components/search-car/SearchCar.vue";
import CarTreeList from "@/components/CarTreeList.vue";
import TimeRange from "@/components/time-range";
import UPanel from "@/components/collapse/panel.vue";
import UCollapse from "@/components/collapse/Collapse.vue";
export default {
  name: "StatisticalAnalysis",
  components: {
    SearchCar,
    CarTreeList,
    TimeRange,
    ZNCStatistics,
    UPanel,
    UCollapse,
    DDCuse:() => import('@/components/statistics/DDCuse.vue')
  },
  data() {
    return {
      split3: 0.163,
      value1: [],
      value2: [],
      value3: [],
      comName: "ZNCStatistics",
      buttonDis: true,
    };
  },
  created() {},
  methods: {
    toggle() {
      this.split3 == "10px" || this.split3 == 0
        ? (this.split3 = 0.163)
        : (this.split3 = "10px");
    },
    scrollToEnd() {
      this.buttonDis = false;
      let centerScroll = document.getElementById("centerScroll");
      centerScroll.scrollTo(centerScroll.scrollWidth, 0);
    },
    scrollToHead() {
      this.buttonDis = true;
      let centerScroll = document.getElementById("centerScroll");
      centerScroll.scrollTo(0, 0);
    },
  },
  computed: {
    leftShow() {
      return this.split3 == 0.163 ? true : false;
    },
  },
};
</script>

<style scoped>

.card-top-btn {
}
.card-top-btn button {
  display: inline-block;
}
.collapse-btn-b {
  margin-left: 6px;
  width: 24px;
  height: 60px;
  padding: 0;
  border-radius: 0 10px 10px 0;
}
.collapse-btn {
  position: absolute;
  top: 30%;
  left: 100%;
  z-index: 102;
}
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
.no-scroll::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/

  height: 10px; /*对水平流动条有效*/
  background-color: #f5f5f5;
  display: none;
}
</style>>

